<template>
	<view class="detail">
	<view class="fixbg" :style="{'background-image' : 'url('+songDetail.al.picUrl +')'}"></view>	
	<musichead class="musichead" :title='songDetail.name' :icon='true'></musichead>
	 
	<view class="container" v-show="!isShow">
		<scroll-view scroll-y="true">
			<view @tap="handleToPlay" class="detail-paly">
				<image :src="songDetail.al.picUrl" :class="{'detail-paly-run' : isPlayRotate}"></image>
				<text class="iconfont" :class="playicon"></text>
				<view></view>
			</view>
			
			<view class="detail-lyric">
				<view class="detail-lyric-wrap" :style="{transform : 'translateY('+ -(lyricIndex -1)*82 +'rpx)'}">
					
					<view class="detail-lyric-item" :class="{active : lyricIndex == index}" v-for="(item,index) in songLyric" :key='index'>{{item.lyric}}</view>
				</view>
			</view>
			
			<view class="detail-like">
				<view class="detail-like-head">喜欢这首歌的人也听过</view>
				<view @tap="handleToSimi(item.id)" class="detail-like-item" v-for="(item,index) in songSimi" :key='index'>
					<view class="detail-like-img">
						<image :src="item.album.picUrl"></image>					
					</view>
					<view class="detail-like-song">
						<view>{{item.name}}</view>
						<view>
							<image v-if="item.privilege.flag > 60 && item.privilege <70" src="../../static/dujia.png"></image>
							<image v-if="item.privilege.maxbr == 999000" src="../../static/sq.png"></image>
							{{item.album.artists[0].name}} - {{item.name}}
						</view>
					</view>
					<text class="iconfont icon-bofang"></text>
				</view>				
			</view>
			
			
			<view class="detail-comment">
				<view class="detail-comment-head">精彩评论</view>
				<view class="detail-comment-item" v-for="(item,index) in songComment" :key='index'>
					<view class="detail-comment-img">
						<image :src="item.user.avatarUrl"></image>
					</view>
					<view class="detail-comment-content">
						<view class="detail-comment-title">
							<view class="detail-comment-name">
								<view>{{item.user.nickname}}</view>
								<view>{{item.time | formatTime}}</view>
							</view>
							<view class="detail-comment-like">{{item.likedCount | formatCount}} <text class="iconfont icon-dianzan"></text> </view>
						</view>
						<view class="detail-comment-text">{{item.content}}</view>
					</view>
				</view>

				
			</view>
		</scroll-view>
	</view>
	 
	</view>
</template>

<script>
	// 引入表头
	import musichead from '../../components/musichead/musichead.vue'
	import '../../common/iconfont.css'
	import {songDetail, songSimi, songComment, songLyric, songUrl} from '../../common/api.js'
	export default {
		data() {
			return {
				songDetail:{
					al:{
						picUrl:''
					}
				},
				songSimi:[],
				songComment:[],
				songLyric:[],
				lyricIndex:0,
				playicon : 'icon-suspend_icon',
				isPlayRotate:true,
				isShow : true,
			}
		},
		onLoad(playlist) {
			// console.log(playlist)
			let songid = playlist.songId
			this.getMusic(songid)
			
		},
		onUnload() {
			this.cancelLyricIndex();
			// #ifdef H5
			this.bgAudioMannager.destroy();
			// #endif
			
		},
		onHide() {
			this.cancelLyricIndex();
			// #ifdef H5
			this.bgAudioMannager.destroy();
			// #endif
		},
		methods: {
			getMusic(songId){
				this.$store.commit('NEXT_ID',songId);
				uni.showLoading({
					title:'加载中..'
				})
				// console.log(songId)
				Promise.all([ songDetail(songId), songSimi(songId), songComment(songId), songLyric(songId), songUrl(songId) ]).then((res)=>{
					// console.log(res)
					if(res[0][1].data.code == '200'){
						this.songDetail = res[0][1].data.songs[0];
					}
					if(res[1][1].data.code == '200'){
						this.songSimi = res[1][1].data.songs;
					}
					if(res[2][1].data.code == '200'){
						this.songComment = res[2][1].data.hotComments;
						// console.log(this.songComment)
					}
					if(res[3][1].data.code == '200'){
						let lyric = res[3][1].data.lrc.lyric;
						// console.log(this.songLyric)
						let re = /\[([^\]]+)\]([^\[]+)/g;
						var result = [];
						lyric.replace(re,($1,$2,$3)=>{
							result.push({"time":this.fromatTomeToSec($2),"lyric":$3})
						});
						// console.log(result)
						this.songLyric = result
						// console.log(this.songLyric)
					}
					if(res[4][1].data.code == '200'){
						// #ifdef MP-WEIXIN
						this.bgAudioMannager = uni.getBackgroundAudioManager();
						this.bgAudioMannager.title = this.songDetail.name;
						// #endif
						// #ifdef H5
						if(!this.bgAudioMannager){
							this.bgAudioMannager = uni.createInnerAudioContext();
						}
						this.playicon = 'icon-bofang';
						this.isPlayRotate = false;
						// #endif
						
						this.bgAudioMannager.src = res[4][1].data.data[0].url;
						this.listenLyricIndex();
						this.bgAudioMannager.onPlay(()=>{
							this.playicon = 'icon-suspend_icon';
							this.isPlayRotate = true;
							this.listenLyricIndex();
						});
						this.bgAudioMannager.onPause(()=>{
							this.playicon = 'icon-bofang';
							this.isPlayRotate = false;			
							this.cancelLyricIndex()
						});
						this.bgAudioMannager.onEnded(()=>{
							this.getMusic(this.$store.state.nextId);
						});
						
						
					}
					this.isShow = false;
					uni.hideLoading();
				});
			},
			
			fromatTomeToSec(value){
				let arr = value.split(':');				
				return (Number(arr[0]*60) + Number(arr[1])).toFixed(2);
			},
			handleToPlay(){
				if(this.bgAudioMannager.paused){
					this.bgAudioMannager.play();
				}else{
					this.bgAudioMannager.pause();
				}
			},
			listenLyricIndex(){
				clearInterval(this.timer);
				this.timer = setInterval(()=>{
					// 歌词遍历
					for(var i=0;i<this.songLyric.length;i++){
						// 播放时间小于最后一条歌词的时候
						if( this.songLyric[this.songLyric.length-1].time < this.bgAudioMannager.currentTime ){
							this.lyricIndex = this.songLyric.length-1;
							break;
						}
						 // 播放时间小于上一条歌词
						if( this.songLyric[i].time < this.bgAudioMannager.currentTime && this.songLyric[i+1].time > this.bgAudioMannager.currentTime ){
							this.lyricIndex = i;
						}
					}
					// console.log(this.lyricIndex)
				},500);
			},
			cancelLyricIndex(){
				clearInterval(this.timer)
			},
			handleToSimi(songId){
				this.getMusic(songId)
			}
		}
	}
</script>

<style scoped>
	.musichead{
		color: #FFFFFF;
	}
.detail-paly{
	width: 580rpx;
	height: 580rpx;
	background: url(../../static/disc.png);
	background-size: cover;
	margin:214rpx auto 0 auto;
	position: relative;
}
.detail-paly image{
	width: 370rpx;
	height: 370rpx;
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	animation: 10s linear move infinite;
	animation-play-state: paused;
}
.detail-paly .detail-paly-run{
	animation-play-state: running;
}
@keyframes move{
	from{transform:rotate(0deg) ;}
	to{transform: rotate(360deg);}
}
.detail-paly text{
	width: 100rpx;
	height: 100rpx;
	font-size: 100rpx;
	color: #FFFFFF;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}
.detail-paly view{
	width: 230rpx;
	height: 360rpx;
	background: url(../../static/needle.png);
	position: absolute;
	left: 150rpx;
	right: 0;
	margin: auto;
	background-size: cover;
	top: -190rpx;
	
}
.detail-lyric{
	font-size: 32rpx;
	line-height: 82rpx;
	height: 246rpx;
	text-align: center;
	overflow: hidden;
	color: #808080;
}
.detail-lyric-wrap{
	transition: 0.5s;
}
.detail-lyric-item{
	height: 82rpx;
}
.detail-lyric-item.active{
	color: #FFFFFF;
}
.detail-like{
	margin: 0 30rpx;
}
.detail-like-head{
	font-size: 36rpx;
	color: #FFFFFF;
	margin: 50rpx 0;
}
.detail-like-item{
	display: flex;
	margin-bottom: 28rpx;
}
.detail-like-img{
	width: 82rpx;
	height: 82rpx;
	border-radius: 20rpx;
	overflow: hidden;
	margin-right: 20rpx;
	align-items: center;
}
.detail-like-img image{
	width: 100%;
	height: 100%;
}
.detail-like-song{
	flex: 1;
	color: #c6c2bf;
}
.detail-like-song view:nth-child(1){
	font-size: 28rpx;
	color: #FFFFFF;
	margin-bottom: 12rpx;
}
.detail-like-song view:nth-child(2){
	font-size: 22rpx;
}
.detail-like-item text{
	font-size: 50rpx;
	color: #c6c2bf;
}
.detail-like-song image{
	width: 26rpx;
	height: 20rpx;
	margin-right: 10rpx;
}
.detail-comment{margin: 0 30rpx;}
.detail-comment-head{ 
	font-size: 36rpx;
	color: #FFFFFF;
	margin: 50rpx 0;
}
.detail-comment-item{
	margin: 28rpx 0;
}
.detail-comment-img{
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 18rpx;
}
.detail-comment-img image{
	width: 100%;
	height: 100%;
}
.detail-comment-content{
	flex: 1;
	color: #cbcacf;
}
.detail-comment-title{
	display: flex;
	justify-content: space-between;
}
.detail-comment-name{
}
.detail-comment-name view:nth-child(1){
	font-size: 26rpx;
}
.detail-comment-name view:nth-child(2){
	font-size: 20rpx;
}
.detail-comment-like{
	font-size: 28rpx;
	}
.detail-comment-text{
	font-size: 28rpx;
	line-height: 40rpx;
	color: #FFFFFF;
	margin-top: 20rpx;
	border-bottom: 1px solid #e0e0e0;
	padding-bottom: 40rpx;
	}
</style>
